<template>
  <div>
    <tools
      :fliterdDataList="fliterdDataList"
      @changParentPageData="pageChangeDataList"
      :parentArr="parentArr"
      :originData="originData"
    ></tools>
    <div class="hello flexLC flexWP">
      <!-- 文件渲染 -->
      <div v-for="item in dataList" :key="item.id">
        <template v-if="item.isDir">
          <dirstyle @selfChildren="changeDataList" :isData="item"></dirstyle>
        </template>
        <template v-else>
          <fileStyle :isData="item"></fileStyle>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import dirstyle from "./dirStyle";
import fileStyle from "./fileStyle";
import tools from "./tools/tools";
import axios from "axios";
export default {
  name: "HelloWorld",
  data() {
    return {
      dataList: [],
      fliterdDataList: [],
      parentArr: [],
      originData: [],
    };
  },
  created() {
    // this.getfilesList();

    this.testQueue();
  },
  methods: {
    testQueue() {
      // const dataArr = [1,2,3,4]
      // class Queue{
      //   constructor(isArr){
      //     this._dataArr = isArr
      //   }
      //   enqueue(data){
      //     return this._dataArr.push(data)
      //   }
      //   unqueue(){
      //     return this._dataArr.shift()
      //   }
      // }
      // let newArr = new Queue(dataArr)
      // console.log(newArr.enqueue(99))
      // console.log(newArr.unqueue())
      const selectDataArr = [
        { jurisdiction: 81, data: 33 },
        { jurisdiction: 35, data: 373 },
        { jurisdiction: 20, data: 353 },
        { jurisdiction: 26, data: 363 },
      ];
      class selectQueue {
        constructor(isArr) {
          isArr.sort((x, y) => {
            return x.jurisdiction - y.jurisdiction;
          });
          this._dataArr = isArr;
        }
        enqueue(data) {
          for (let key in this._dataArr) {
            if (data.jurisdiction < this._dataArr[key].jurisdiction) {
              this._dataArr.splice(key, 0, data);
              break;
            } else if(key===this._dataArr.length) {
              this._dataArr.push(data);
              break;
            }
          }
          return this._dataArr
        }
        unqueue() {}
      }
      let newSelectDataArr = new selectQueue(selectDataArr);
      newSelectDataArr.enqueue({ jurisdiction: 2, data: 666 });
      newSelectDataArr.enqueue({ jurisdiction: 30, data: 999 });
      console.log(
        "file: HelloWorld.vue - line 93 - testQueue - newSelectDataArr",
        newSelectDataArr
      );
    },
    pageChangeDataList(data) {
      //点击首页按钮
      this.dataList = data;
    },
    getfilesList() {
      //获取数据
      axios.get("/api/all").then((res) => {
        const resData = res.data.data;
        console.log(
          "file: HelloWorld.vue - line 49 - axios.get - resData",
          resData
        );
        this.originData = resData;
        let alreadyFormateData = this.dirFilter(this.formateData(resData));
        this.dataList = alreadyFormateData;
        this.fliterdDataList = alreadyFormateData;
      });
    },
    dirFilter(data) {
      //数据-对目录进行排序 目录在前 文件在后
      let dirArr = [],
        fileArr = [];
      data.map((v) => {
        if (v.isDir) {
          dirArr.push(v);
        } else {
          fileArr.push(v);
        }
      });
      return dirArr.concat(fileArr);
    },
    changeDataList(data) {
      //当点击目录时更改当前所展示的目录
      this.parentArr.push(this.dataList); //返回上一层操作
      this.dataList = this.dirFilter(data.children);
    },
    formateData(data) {
      //对请求得到的数据进行序列化 生成树状结构
      let topDataArr = [];
      let needFilterArr = [];
      data.map((v) => {
        if (v.pid == -1) {
          topDataArr.push(v);
        } else {
          needFilterArr.push(v);
        }
      });
      this.dataTotree(topDataArr, needFilterArr);
      return topDataArr;
    },
    dataTotree(top, needfilter) {
      //递归生成父子节点树
      top.map((v, i) => {
        needfilter.map((z) => {
          if (z.pid === v.id) {
            let _needfilter = JSON.parse(JSON.stringify(needfilter));
            _needfilter.splice(i, 1);
            this.dataTotree([z], _needfilter);
            if (v.children) {
              v.children.push(z);
            } else {
              v.children = [z];
            }
          }
        });
      });
    },
  },
  components: {
    dirstyle,
    fileStyle,
    tools,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/utilcss/utilFlex.css";
.hello {
  width: 100vw;
  background: sandybrown;
  box-sizing: border-box;
  padding: 15px;
}
</style>
